<template>
	<div class="loginbox">
		<form action="">
			<input class="text phone" type="text" placeholder="请输入手机号" v-model.lazy="username">
			<p :class="{checkf:no[0],checkt:yes[0]}">{{errorMessage.username}}</p>
			<input class="text pwd" type="password" placeholder="请输入密码" v-model.lazy="pwd">
			<p :class="{checkf:no[1],checkt:yes[1]}">{{errorMessage.pwd}}</p>
			<div class="verifybox">
				<input class="text verify" type="text" placeholder="请输入验证码" v-model.lazy="verify">
				<div @click="getverify" class="veripic" v-html="verifytext"></div>
			</div>
			<div class="remb">
				<input class="rembox" type="checkbox" v-model="isRemb" @click="remb">记住我
				<a class="forget" href="/cll/forget">忘记密码？</a>
			</div>
			<input @click="loginbtn" class="login" type="button" value="登录">
		</form>

		<p class="goto">还没有WeKnow账号？
			<router-link to="/cll/register">去注册>></router-link>
		</p>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		getCurrentInstance,
		onMounted
	} from "vue"
	import jwt_decode from 'jwt-decode'
	let {
		proxy
	} = getCurrentInstance()

	let username = ref(""),
		pwd = ref(""),
		verify = ref(""),
		verifytext = ref(``);

	let flag = ref(false)

	// 错误信息提示
	let errorMessage = reactive({
		username: "",
		pwd: "",
		pwd2: ""
	});
	// 错误信息提示样式设置
	let yes = reactive([false, false, false])
	let no = reactive([false, false, false])
	var phone_reg = /^1[3|4|5|7|8|9]\d{9}$/, //手机号正则验证
		pwd_reg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,16}$/ //密码正则验证
	watch(username, (newvalue, oldvalue) => {
		if (phone_reg.test(newvalue)) {
			errorMessage.username = ""
			flag.value = true
			yes[0] = true
			no[0] = false
		} else {
			errorMessage.username = "用户名格式错误！"
			flag.value = false
			no[0] = true
			yes[0] = false
		}
	})
	watch(pwd, (newvalue, oldvalue) => {
		if (pwd_reg.test(newvalue)) {
			errorMessage.pwd = ""
			flag.value = true
			yes[1] = true
			no[1] = false
		} else {
			errorMessage.pwd = "密码格式错误！请输入8-16位字符：包含英文字母、数字、和特殊字符@$!%*#?&"
			flag.value = false
			no[1] = true
			yes[1] = false
		}
	})
7
	function getverify() {
		proxy.$axios.get('/verify')
			.then(res => {
				verifytext.value = res.data
			})
	}

	let isRemb = ref(false)
	onMounted(() => {
		getverify()
		let token = localStorage.getItem("token");
		if (token) {
			console.log(token);
			isRemb.value = true;
			let fdata = new FormData()
			fdata.append("token", token)
			proxy.$axios.post('/rember',fdata)
				.then(res => {
					username.value=res.data[0].phone
					pwd.value=res.data[0].pwd
				})
		}
	})

	function getToken() {
		let fdata = new FormData()
		fdata.append("username", username.value)
		fdata.append("pwd", pwd.value)
		fdata.append("verify", verify.value)
		proxy.$axios.post('/login',fdata)
			.then(res => {
				// console.log(res);
				if (res.data.code == 2002) {
					localStorage.setItem("token", res.data.token) // 存储token码
				}
			})
	}

	function remb() {
		isRemb.value = !isRemb.value
		if (isRemb.value) { //记住我
			// console.log(isRemb, 6666);
			getToken()
		} else {
			//不记住我
			localStorage.removeItem("token")
			// console.log(isRemb, 777777);
		}
	}

	async function loginbtn() { //点击登录
		if (username.value == "" || pwd.value == "" || verify.value == "") {
			alert("输入内容并不能为空！")
			// console.log(flag, 1111)
		} else {
			let fdata = new FormData()
			fdata.append("username", username.value)
			fdata.append("pwd", pwd.value)
			fdata.append("verify", verify.value)
			let res = await proxy.$axios.post('/login', fdata)
			// console.log(res);
			if (res.data.code == 2002) {
				alert(res.data.info)
				proxy.$router.push("/wyh")
				localStorage.setItem("token",res.data.token)
			} else if (res.data.code == 4002) {
				// alert("登录失败，用户名不存在！")
				alert(res.data.info)
				username.value = ""
				pwd.value = ""
				verify.value = ""
				getverify()
			} else if (res.data.code == 4003) {
				alert(res.data.info)
				pwd.value = ""
				verify.value = ""
				getverify()
			} else if (res.data.code == 4004) {
				alert(res.data.info)
				verify.value = ""
				getverify()
			}
		}
	}
</script>


<style scoped lang="scss">
	.loginbox {
		width: 600px;
		height: 500px;
		border-bottom-left-radius: 24px;
		border-bottom-right-radius: 24px;
		background-color: rgb(237, 177, 65, .9);

		form {
			width: 480px;
			height: 450px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			margin: auto;
			font-family: "Hiragino Sans GB", "冬青黑体", "Microsoft Yahei", "微软雅黑";

			input {
				border: none;
				outline: none;
			}

			p {
				font-size: 12px;
				text-align: center;
				color: gray;
			}

			.checkf {
				color: red;
			}

			.checkt {
				color: rgb(93, 200, 67);
			}

			.text {
				box-sizing: border-box;
				height: 56px;
				width: 480px;
				border: 1px solid #ddd;
				border-radius: 28px;
				line-height: 26px;
				font-size: 18px;
				color: #333;
				padding: 14px 20px;
				font-family: "Hiragino Sans GB", "冬青黑体", "Microsoft Yahei", "微软雅黑";
			}

			input:focus {
				border-color: #F28E16;
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #F28E16;
			}

			.verifybox {
				width: 480px;
				display: flex;
				justify-content: space-between;

				.verify {
					width: 300px;
				}

				.veripic {
					width: 160px;
					border: 1px solid #FA7E23;
					height: 56px;
					border-radius: 28px;
					text-align: center;
					overflow: hidden;
				}
			}

			.remb {
				color: #333;
				font-size: 18px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				display: block;

				.forget {
					color: rgb(104, 134, 194);
					margin-left: 150px;

					&:hover {
						text-decoration: underline;
					}
				}

				.rembox {
					height: 16px;
					width: 16px;
					margin-right: 5px;
					margin-top: -5px;
				}
			}

			.login {
				margin: 0 auto;
				height: 56px;
				width: 400px;
				height: 56px;
				border-radius: 28px;
				line-height: 56px;
				font-size: 24px;
				color: #fff;
				font-family: "Hiragino Sans GB", "冬青黑体", "Microsoft Yahei", "微软雅黑";
				background: #F28E16;
				cursor: pointer;

				&:hover {
					background-color: #FA7E23;
				}
			}
		}

		.goto {
			text-align: center;
			font-family: "Hiragino Sans GB", "冬青黑体", "Microsoft Yahei", "微软雅黑";

			a {
				color: rgb(104, 134, 194);

				&:hover {
					text-decoration: underline;
				}
			}
		}
	}
</style>
